<#include "/WEB-INF/template/common/macro/base.ftl"/>
<#include "/WEB-INF/template/common/macro/libs.ftl"/>
<#include "/WEB-INF/template/common/layout/l_admin.ftl"/>
<@adminLayout>
    <@breadcrumb view=breadcrumbView/>
    <@printJsonView jsonView/>
<div class="row">
    <div class="col-md-12">
        <div class="well">
            <div class="btn-group">
                <button type="button" class="btn btn-default" onclick="setToolBarOpt('role')"><i
                        class="fa fa-cogs"></i>设置角色
                </button>
                <button type="button" class="btn btn-default" onclick="setToolBarOpt('menu')"><i
                        class="fa fa-bullhorn"></i> 设置菜单
                </button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">系统角色
                <span class="roletree badge badge-success pull-right" style="display: none">
                    <div class=​"fa-item col-md-3 col-sm-4"><i class="fa fa-check"></i>​</div>
            ​</span>
        </div>
        <div class="panel-body">
            <div class="alert alert-info" role="alert">
                选择角色根节点后,单击【添加】按钮.
            </div>
            <div class="row">
                <form action="${CONTEXT_PATH}/m/role/savenode" method="post" onsubmit="return checktree();">
                    <div class="input-icon col-md-6">
                        <i class="fa fa-key"></i>
                        <input type="text" name="rolename" class="form-control" placeholder="角色权限名称"/>
                        <input type="hidden" name="puuid"/>
                    </div>
                        <span class="input-group-btn">
                            <button class="btn blue" type="submit">添加</button>
                        </span>
                </form>
            </div>
        <#--角色树-->
            <div class="row">
                <div class="well-sm">
                    <ul id="treediv" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading">菜单树
                <span class="menutree badge badge-success pull-right" style="display: none">
                        <div class=​"fa-item col-md-3 col-sm-4"><i class="fa fa-check"></i>​</div>
        ​</span>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning" role="alert">
                    选择左侧【角色菜单】后,再选择菜单.
                    <div class="btn-group btn-group-sm btn-group-solid right">
                        <button type="button" class="btn green" onclick="savemenu();">保存</button>
                        <button type="button" class="btn blue">重置</button>
                    </div>
                </div>
            </div>
        </div>
        <ul id="treemenu" class="ztree"></ul>
    </div>
</div>
</div>
</div>
    <@script>
        <@libs_ztree_css/>
        <@libs_ztree_js/>
    <script type="text/javascript">
        //role tree setting
        var TreeSetting = {
            edit: {
                enable: true,
                editNameSelectAll: true,
            },
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "uuid"
                },
                key: {
                    name: "name",
                    children: "childs"
                }
            },
            callback: {
                onCheck: function (event, treeId, treeNode) {
                    $("[name='puuid']").val(treeNode.id);
                    setMenubyRid(treeNode.id);
                    //如果是非编辑状态下,则联动右侧菜单树
//                    if(TreeSetting.edit.enable==false){
//                        setMenubyRid(treeNode.id);
//                    }
                },
                beforeRemove: function (treeId, treeNode) {
//                    zTree.selectNode(treeNode);
                    return confirm("确认删除 节点 - [" + treeNode.name + "] 吗？");
                },
                onRemove: function (e, treeId, treeNode) {
                    $.getJSON("${CONTEXT_PATH}/m/role/delete/" + treeNode.node.uuid, {}, function (json) {
                        if (json.status) {
                            alert("删除成功[" + treeNode.name + "]");
                        } else {
                            alert("删除失败[" + treeNode.name + "]");
                        }
                    });
                },
                onRename: function (e, treeId, treeNode, isCancel) {
                    $.post("${CONTEXT_PATH}/m/role/update",
                            {"uuid": treeNode.node.uuid, "rolename": treeNode.name},
                            function (json) {
                                if (json.status) {
                                    alert("修改成功[" + treeNode.name + "]");
                                } else {
                                    alert("修改失败[" + treeNode.name + "]");
                                }
                            }, "json");
                }
            }
        };

        jQuery(document).ready(function () {
            //初始化树节点选择
            var treedata = ${rolejson}[0];
            $.fn.zTree.init($("#treediv"), TreeSetting, treedata);
            var tree = $.fn.zTree.getZTreeObj("treediv");
            tree.expandAll(true);

            initMenuTree(false);

        });
        /**
         * 开始设置菜单
         */
        function setToolBarOpt(flag) {
            var tree = $.fn.zTree.getZTreeObj("treediv");
            if (flag === "menu") {
                $(".roletree").hide();
                $(".menutree").show();
                tree.setEditable(false);
                initMenuTree(true);
            } else {
                $(".roletree").show();
                $(".menutree").hide();
                initMenuTree(false);
                tree.setEditable(true);
            }
        }
        /**
         * 重新构建菜单树
         */
        function initMenuTree(editable) {
            var jsonData = ${menujson}[0];
            var setting = $.extend(TreeSetting, {
                edit: {},
                check: {
                    enable: true,
                    chkStyle: "checkbox"
                },
                data: {
                    simpleData: {
                        enable: true
                    },
                    key: {
                        name: "name",
                        children: "childs"
                    }
                },
                callback: {
                    onCheck: function (event, treeId, treeNode) {
                    }
                }

            });
            $.fn.zTree.init($("#treemenu"), setting, jsonData);
            var treemenu = $.fn.zTree.getZTreeObj("treemenu");
            treemenu.expandAll(true);
            treemenu.setting.check.enable = editable;
            treemenu.refresh();
        }
        /**
         *
         */
        function savemenu() {
            var treerole = $.fn.zTree.getZTreeObj("treediv");
            var nodes = treerole.getCheckedNodes();
            if (nodes.length == 0) {
                alert("必须选择一个角色才能设置菜单");
                return;
            }
            var roleid = nodes[0].node.uuid;
            var treemenu = $.fn.zTree.getZTreeObj("treemenu");
            nodes = treemenu.getCheckedNodes();
            var ids = [];
            for (var i = 0; i < nodes.length; i++) {
                ids.push(nodes[i].node.code);
            }
            $.post("${CONTEXT_PATH}/m/role/savemenu",
                    {roleid: roleid, menus: ids.join(",")}
                    , function (json) {
                        if (json.status) {
                            alert("保存成功");
                        }
                    }, "json");
        }

        /**
         * 获取已设置的role的menu 并显示在控件中
         * @param rid
         */
        function setMenubyRid(rid) {
            if (rid) {
                var treeObj = $.fn.zTree.getZTreeObj("treemenu");
                treeObj.checkAllNodes(false);
                $.getJSON("${CONTEXT_PATH}/m/role/menu", {roleid: rid}, function (json) {
                    if (json.status) {
                        console.debug(json);
                        var menus = json.dataObj.menus.split(",") || [];
                        // 查找节点集合
                        var nodes = treeObj.getNodesByFilter(function (node) {
                            return menus.indexOf(node.id) != -1;
                        });
                        // 设置勾选状态
                        for (var i = 0, l = nodes.length; i < l; i++) {
                            treeObj.checkNode(nodes[i], true);
                        }
                    }
                });
            }
        }

        function checktree() {
            var treerole = $.fn.zTree.getZTreeObj("treediv");
            var nodes = treerole.getCheckedNodes();
            if (nodes.length == 0) {
                alert("必须选择一个[上级]角色");
                return false;
            }
            var rolename = $("[name='rolename']").val();
            if (!rolename) {
                alert("角色名不能为空");
                return false;
            }
            return true;
        }
    </script>
    </@script>
</@adminLayout>
